<template>
  <div class="app-container">
    <!-- 搜索/过滤区域 -->
    <div class="search-container">
      <el-form :inline="true" size="small" class="search-form">
        <el-form-item label="患者姓名">
          <el-input v-model="searchForm.idNo" placeholder="请输入患者姓名" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="主管医生">
          <el-input v-model="searchForm.ageLt" placeholder="请输入医生姓名" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="科室">
          <el-select v-model="searchForm.tag" placeholder="请选择" clearable style="width: 150px;">
            <el-option v-for="tag in tags" :key="tag" :label="tag" :value="tag" />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item style="width: 100%;text-align: end;">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" v-loading="loading" @row-click="getDetail" style="width: 100%; margin-bottom: 20px;"
      border stripe>
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column prop="name" label="名称" width="120" />
      <el-table-column prop="sex" label="性别" width="120" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="dept" label="科室" width="120" />
      <el-table-column prop="doctor" label="主管医生" width="120" />
      <el-table-column prop="diag" label="诊断" />
      <el-table-column prop="tag" label="标签">
        <template slot-scope="scope">
          <el-tag v-for="tag in scope.row.tags" :key="tag" size="small" style="margin-right: 5px;">
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开方时间" width="220" />
      <el-table-column prop="amount" label="待审处方" width="60" />

    </el-table>



  </div>
</template>

<script>
import DateRangePicker from "@/components/DateRangePicker";

export default {
  name: "Patient",
  components: { DateRangePicker },
  data() {
    return {
      // 搜索表单
      searchForm: {
        name: "",
        bookTime: "",
        idNo: "",
        sex: "",
        tags: "",
        ageGt: "",
        ageLt: ""
      },
      tags: ["高血压", "糖尿病", "慢阻肺", "重点监护"],
      // 表格数据
      tableData: [
        {
          name: "巫师",
          sex: "男",
          age: "68",
          dept: '呼吸科',
          doctor: "陆离",
          diag: "头晕一周",
          tags: ["高血压", "糖尿病"],
          startTime: "2025-09-15 15:45:44",
          amount: "3"
        },
        {
          name: "黄药师",
          sex: "男",
          age: "68",
          dept: '呼吸科',
          doctor: "陆离",
          diag: "头晕一周",
          tags: ["高血压", "糖尿病"],
          startTime: "2025-09-15 15:45:44",
          amount: "3"
        }
      ],
      patientItem: {},
      // 加载状态
      loading: false,
      dialogVisible: false,
      educateDdialogVisible: false,
      // 分页信息
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 3
      },
      educate: [
        {
          name: "全麦、无糖食品，糖尿病到sdasdasd阿迪娜三年多了底应该怎么选择？",
          likes: 389,
          collects: 324,
          forwards: 467
        },
        {
          name: "挂号须知",
          likes: 389,
          collects: 324,
          forwards: 467
        }
      ],

      // 表单验证规则
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        employeeId: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        tags: [{ required: true, message: "请选择项目", trigger: "change" }]
      }
    };
  },
  methods: {

    getDetail() {
      this.$router.push({ path: 'prescDetail' })
    },
    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: "",
        employeeId: "",
        phone: "",
        tag: "",
        boundUser: ""
      };
      this.handleSearch();
    },

    handleSearch() {

    },
    handleDialogClose() {

    },
  },
  mounted() { }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .search-container {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .search-form {
      .el-form-item {
        margin-bottom: 15px;
        margin-right: 20px;
      }
    }
  }

  .operation-container {
    margin-bottom: 20px;
    text-align: right;
  }

  .operation-text {
    font-size: 14px;
  }

  .pagination-container {
    text-align: right;
    margin-top: 20px;
  }

  .el-table {
    .el-button--text {
      padding: 0;
      margin: 0 5px;
    }
  }

  .dialog-footer {
    text-align: right;
  }
}
</style>
